<template>
	<view class="page-meet">
		<UniStatusBar></UniStatusBar>
		<!-- 喜欢你的人，筛选按钮 -->
		<view class="top">
			<!-- 筛选按钮 -->
			<view class="btn" @tap="filter">
				<image src="@/static/icon/filter-icon.png" mode="aspectFill" />筛选
			</view>
		</view>

		<!-- 沟通对象选择 -->
		<view class="main">
			<!-- 换一批按钮 -->
			<view class="btn">
				<view class="content" @tap="change"> {{btText}} </view>
			</view>

			<view class="main-list" v-show="showItem">
				<view class="item" v-for="(item, index) in mainList" :key="index"
					:class="[`is-${index}`, {'animated flip':item.isVip==1}, {'animated flipInX':item.isVip==0}]"
					@tap="openBrief(index)">
					<view style="position: relative;">
						<template v-if="item.isVip==1">
							<view class="vip">
								<image src="@/static/images/vip/vip.png" mode="aspectFill" />
							</view>
						</template>
						<view class="avatar">
							<image :src="item.user_icon" mode="aspectFill" />
						</view>
						<template v-if="item.sex==0">
							<view class="icon">
								<image src="@/static/icon/brief-icon-1.png" mode="aspectFill" class="icon-img" />
							</view>
						</template>
						<template v-else>
							<view class="woman-icon">
								<image src="@/static/icon/brief-icon-2.png" mode="aspectFill" class="icon-img" />
							</view>
						</template>
					</view>
					<view class="name">{{ item.username }}</view>
					<view class="distance">{{ item.city }}</view>
				</view>
			</view>
		</view>

		<!-- 点击开始匹配 -->
		<view class="match" @tap="toVoice">
			<view class="info">
				<view class="content">
					<text class="title">语音匹配</text>
					<text class="number">今日剩余3次</text>
				</view>
				<text class="tips">点击匹配寻找适合你的另一半</text>
			</view>
			<image src="@/static/images/match-img.png" mode="" />
		</view>

		<!-- 弹出筛选 -->
		<view class="popup">
			<cl-popup :visible.sync="visible" padding="30rpx" direction="bottom">
				<view class="box">
					<text class="title"> 设置筛选项 </text>
					<text class="tips">筛选条件仅适用于在线匹配</text>

					<!-- 性别筛选 -->
					<view class="block sex">
						<text class="block-title">对方的性别</text>
						<view class="list">
							<cl-row :gutter="36">
								<cl-col :span="8" v-for="(item, index) in sex" :key="index">
									<view class="item" :class="{ 'is-active': item.value == sexActive }"
										@tap="activeSex(item)">
										<image :src="item.icon" mode="aspectFill" v-if="item.icon" />
										{{ item.label }}
									</view>
								</cl-col>
							</cl-row>
						</view>
					</view>

					<!-- 年龄筛选 -->
					<view class="block age">
						<view class="block-title">
							<text class="txt">对方的年龄</text>
							<text class="Interval">{{ chooseMinAge }} - {{ chooseMaxAge }}</text>
						</view>
						<view class="slider">
							<RangeSlider :width="slideWidth" :height="slideHeight" :blockSize="slideBlockSize"
								:min="ageSlideMin" :max="ageSlideMax" :values="rangAge" :step="step"
								:liveMode="isLiveMode" :background-color="bgc" :active-color="activeBgc"
								@rangechange="onRangeChange">
								<image slot="minBlock" src="@/static/images/slider-btn.png" mode="aspectFill"
									class="img" />
								<!-- 左边滑块的内容 -->
								<image slot="maxBlock" src="@/static/images/slider-btn.png" mode="aspectFill"
									class="img" />
								<!-- 右边滑块的内容 -->
							</RangeSlider>
						</view>
					</view>

					<!-- 距离筛选 -->
					<view class="block distance">
						<text class="block-title">对方和我的距离</text>
						<view class="list">
							<cl-row :gutter="36">
								<cl-col :span="8" v-for="(item, index) in distance" :key="index">
									<view class="item" :class="{ 'is-active': item.value == distanceActive }"
										@tap="activeDistance(item)">
										{{ item.label }}
									</view>
								</cl-col>
							</cl-row>
						</view>
					</view>

					<!-- 按钮 -->
					<view class="btn">
						<cl-button fill round @tap="close">确定</cl-button>
					</view>
				</view>
			</cl-popup>
		</view>

		<!-- 简要信息弹窗，点击头像弹出 -->
		<view class="brief">
			<cl-popup :visible.sync="briefVisible" padding="30rpx" direction="bottom">
				<view class="box">
					<!-- 个人信息 -->
					<view class="info">
						<!-- 头像 -->
						<view class="avatar" @tap="toDetail(chooseUser.id)">
							<image :src="chooseUser.user_icon" mode="aspectFill" class="avatar-img" />

							<template v-if="chooseUser.sex==0">
								<view class="icon">
									<image src="@/static/icon/brief-icon-1.png" mode="aspectFill" class="icon-img" />
								</view>
							</template>
							<template v-else>
								<view class="woman-icon">
									<image src="@/static/icon/brief-icon-2.png" mode="aspectFill" class="icon-img" />
								</view>
							</template>

						</view>
						<!-- 打招呼 -->
						<view class="dazhaohu" @tap="navigateToChatDetail(chooseUser.id, chooseUser.username)">
							<image src="@/static/images/article/dazhaohu_2.png" mode="aspectFill" />
							<view class="text">
								打招呼
							</view>
						</view>

						<!-- 昵称 -->
						<text class="name">{{chooseUser.username}}</text>

						<!-- ID，位置 -->
						<view class="info-info">
							<!-- ID -->
							<text class="id">ID：{{chooseUser.id_num}}</text>
							<!-- 位置 -->
							<view class="position">
								<cl-icon name="map-fill" color="#4D8B9D"></cl-icon>
								<text class="content">{{chooseUser.city}}</text>
							</view>
						</view>
						<!-- 签名 -->
						<view class="signature"> {{chooseUser.signature}} </view>
					</view>

					<!-- 相册 -->
					<view class="photo">
						<!-- 标题，查看更多 -->
						<view class="photo-top">
							<text class="photo-title">TA的相册</text>
							<view class="photo-more" @tap="toDetail(chooseUser.id)">
								查看更多<cl-icon name="arrow-right"></cl-icon>
							</view>
						</view>

						<!-- 相册列表 -->
						<view class="list">
							<cl-row :gutter="21">
								<cl-col :span="8" v-for="(item, index) in chooseUser.image" :key="index">
									<view class="item" @tap="toDetail(chooseUser.id)">
										<image :src="item" mode="aspectFill" />
									</view>
								</cl-col>
							</cl-row>
						</view>
					</view>
				</view>
			</cl-popup>
		</view>
	</view>
</template>

<script>
	import RangeSlider from "../../components/range-slider/range-slider";
	import UniStatusBar from "../../components/uni-status-bar.vue";

	export default {
		components: {
			RangeSlider,
			UniStatusBar,
		},

		data() {
			return {
				storageKey: "meet-filter",
				chooseUser: {
					id: '',
					id_num: '',
					city: '',
					username: '',
					user_icon: '',
					sex: '',
					signature: '',
					image: []
				},
				showItem: true,
				btText: "匹配中..",
				mainList: [],
				sexActive: 2,
				sex: [{
						label: "不限",
						value: 2,
					},
					{
						icon: require("@/static/icon/man.png"),
						label: "男生",
						value: 0,
					},
					{
						icon: require("@/static/icon/woman.png"),
						label: "女生",
						value: 1,
					},
				],
				distanceActive: 2,
				distance: [{
						label: "不限",
						value: 2
					},
					{
						label: "优先同城",
						value: 1
					},
				],
				visible: false, // 筛选条件弹出
				ageSlideMin: 0, // 年龄最小
				ageSlideMax: 100, // 年龄最大
				rangAge: [0, 100], // 年龄选中区间
				pageIndex: 0,
				slideWidth: 696, // 滑块组件宽度
				chooseMinAge: 0,
				chooseMaxAge: 100,
				slideHeight: 6, // 滑块组件高度
				slideBlockSize: 50, // 滑块的大小
				step: 1,
				isLiveMode: true, // 是否即时刷新数值
				bgc: "#F5F5F5", // 滑块组件未选中部分背景色
				activeBgc: "#E6B469", // 滑块组件选中部分背景色
				myVisible: false, // 个人中心弹出
				briefVisible: false, // 对象简要信息弹出
				briefPhoto: [{
						label: require("@/static/images/brief-cover-1.png"),
						vlaue: 1
					},
					{
						label: require("@/static/images/brief-cover-2.png"),
						vlaue: 2
					},
					{
						label: require("@/static/images/brief-cover-3.png"),
						vlaue: 3
					},
				],
			};
		},
		onShow() {},
		onLoad() {
			uni.$on("first_meet", this.getMatch)
			let filter = uni.getStorageSync(this.storageKey);
			// TODO
			if (true) {
				this.sexActive = filter.sexActive;
				this.distanceActive = filter.distanceActive;
				this.chooseMinAge = filter.chooseMinAge;
				this.chooseMaxAge = filter.chooseMaxAge;
			}
			this.getMatch();
		},
		onBackPress() {
			this.visible = false;
			this.briefVisible = false;
		},
		onHide() {
			this.visible = false;
			this.briefVisible = false;
		},
		methods: {
			// 
			async getMatch() {
				this.pageIndex++
				let [err, res] = await this.$http.post('match/match/getMatch', {
					sex: this.sexActive,
					sameCity: this.distanceActive,
					minAge: this.chooseMinAge,
					maxAge: this.chooseMaxAge,
					distanceActive:this.distanceActive,
					pageIndex: this.pageIndex
				}, {
					checkToken: true
				});
				// if (!this.$http.errorCheck(err, res)) {
				// 	return;
				// }
				this.mainList = res.data.data;
				this.showItem = true;
				this.btText = "换一批"
			},
			change() {
				this.btText = "匹配中.."
				this.showItem = false;
				this.getMatch();
			},
			// 个人中心弹出
			openMy() {
				this.myVisible = true;
			},
			// 筛选条件弹出
			filter() {
				this.visible = true;
			},
			// 筛选条件关闭
			close() {
				this.visible = false;
			},
			// 对象简要信息弹出
			openBrief(index) {
				this.briefVisible = true;

				this.chooseUser.id = this.mainList[index].id;
				this.chooseUser.id_num = this.mainList[index].id_num;
				this.chooseUser.city = this.mainList[index].city;
				this.chooseUser.username = this.mainList[index].username;
				this.chooseUser.user_icon = this.mainList[index].user_icon;
				this.chooseUser.sex = this.mainList[index].sex;
				this.chooseUser.signature = this.mainList[index].signature;
				this.chooseUser.image = this.mainList[index].image;
				console.log("this.mainList[index]"+this.mainList[index]);
				console.log("this.chooseUser"+this.chooseUser);
				// this.chooseUser.id = '1';
				// this.chooseUser.id_num = '1';
				// this.chooseUser.city = '1';
				// this.chooseUser.username = '1';
				// this.chooseUser.user_icon = '1';
				// this.chooseUser.sex = '1';
				// this.chooseUser.signature = '1';
				// this.chooseUser.image = ['https://tupian.qqw21.com/article/UploadPic/2020-3/202031120355572839.jpg'];

				console.log(this.chooseUser);
			},
			// 性别选择
			activeSex(item) {
				this.sexActive = item.value;
				console.log(this.sexActive);
				this.updateStorage();
			},
			// 距离选择
			activeDistance(item) {
				this.distanceActive = item.value;
				console.log(this.distanceActive);
				this.updateStorage();
			},
			// 区间选择事件
			onRangeChange(obj) {
				this.chooseMinAge = parseInt(obj.originalValue.minValue);
				this.chooseMaxAge = parseInt(obj.originalValue.maxValue);
				this.rangAge[0] = this.chooseMinAge;
				this.rangAge[1] = this.chooseMaxAge;
				this.updateStorage();
			},
			//更新缓存
			updateStorage() {
				uni.setStorageSync(this.storageKey, {
					"sexActive": this.sexActive,
					"distanceActive": this.distanceActive,
					"chooseMinAge": this.chooseMinAge,
					"chooseMaxAge": this.chooseMaxAge
				})
			},
			// 语音匹配跳转
			toVoice() {
				uni.navigateTo({
					url: "/pages/voice/index",
				});
			},
			// 前往详情
			toDetail(uid) {
				uni.navigateTo({
					url: "/pages/detail/index?uid=" + uid,
				});
			},
			// 前往好友请求列表
			toFriendRequest() {
				uni.navigateTo({
					url: "/pages/friend-request/index",
				});
			},
			navigateToChatDetail(userID, nickName) {
				let jsonUserID = encodeURIComponent(JSON.stringify(userID));
				let jsonNickName = encodeURIComponent(JSON.stringify(nickName));
				let jsonConversationID = encodeURIComponent(JSON.stringify("C2C" + userID));
				let jsonConversationType = encodeURIComponent(JSON.stringify("C2C"));
				uni.navigateTo({
					url: "/pages/chat/detail?userID=" + jsonUserID + "&nickName=" + jsonNickName +
						"&conversationID=" + jsonConversationID + "&conversationType=" + jsonConversationType
				})
			},
		},
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		overflow: hidden;
	}

	.page-meet {
		padding-top: 40rpx;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: linear-gradient(180deg, #292e49 0%, #536976 23%, #bbd2c5 100%);

		.more {
			width: 100%;
			height: 142rpx;
			padding: 24rpx 0 0 30rpx;
			box-sizing: border-box;

			image {
				width: 46rpx;
				height: 40rpx;
				background-color: #536976;
			}
		}

		.top {
			display: flex;
			align-items: center;
			margin-bottom: 90rpx;
			padding: 0 30rpx;

			.like-list {
				display: flex;
				align-items: center;
				flex: 1;

				.list {
					display: flex;
					align-items: center;
					margin-right: 7rpx;

					.item {
						width: 35rpx;
						height: 35rpx;

						&.item:not(:first-child) {
							margin-left: -15rpx;
						}

						image {
							width: 35rpx;
							height: 35rpx;
							border-radius: 50%;
							overflow: hidden;
						}
					}
				}

				.title {
					font-size: 28rpx;
					font-weight: 400;
					color: #ffffff;
				}
			}

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 144rpx;
				height: 60rpx;
				border: 2rpx solid #ffffff;
				border-radius: 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #ffffff;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 9rpx;
				}
			}
		}

		.main {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 100%;
			height: 600rpx;

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 192rpx;
				height: 192rpx;
				background-color: #7fa5a5;
				border-radius: 50%;

				.content {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 168rpx;
					height: 168rpx;
					background-color: #93c5c0;
					border-radius: 50%;
					font-size: 32rpx;
					font-weight: 400;
					color: #ffffff;
				}
			}

			.main-list {
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.vip {
						position: absolute;
						top: 0;
						left: 0;
						text-align: center;
						height: 40rpx;
						width: 100%;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.icon {
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						right: 0;
						top: 130rpx;
						width: 36rpx;
						height: 36rpx;
						background-color: #58bcff;
						border-radius: 50%;

						&-img {
							width: 25rpx;
							height: 24rpx;
						}
					}

					.woman-icon {
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						right: 0;
						top: 130rpx;
						width: 36rpx;
						height: 36rpx;
						background-color: #ff5a70;
						border-radius: 50%;

						&-img {
							width: 25rpx;
							height: 24rpx;
						}
					}

					.avatar {
						margin-top: 40rpx;
						width: 108rpx;
						height: 108rpx;
						margin-bottom: 10rpx;
						border: solid 6rpx #8d9da4;
						border-radius: 50%;
						position: relative;
						overflow: hidden;

						image {
							width: 108rpx;
							height: 108rpx;
							border-radius: 50%;
						}
					}

					.name {
						display: block;
						margin-bottom: 10rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #ffffff;
						text-overflow: ellipsis;
						overflow: hidden;
						max-width: 108rpx;
						white-space: nowrap;
					}

					.distance {
						font-size: 24rpx;
						font-weight: 400;
						color: #dce2e3;
					}

					&.is-0 {
						position: absolute;
						top: 0;
						left: 102rpx;
					}

					&.is-1 {
						position: absolute;
						top: 0;
						right: 102rpx;
					}

					&.is-2 {
						position: absolute;
						top: 338rpx;
						left: 30rpx;
					}

					&.is-3 {
						position: absolute;
						top: 338rpx;
						right: 30rpx;
					}

					&.is-4 {
						position: absolute;
						top: 474rpx;
						left: calc(50% - 54rpx);
					}
				}
			}
		}

		.match {
			display: flex;
			align-items: center;
			position: fixed;
			bottom: calc(42rpx + 50px + env(safe-area-inset-bottom));
			width: calc(100% - 60rpx);
			margin: 0 30rpx;
			padding: 28rpx 24rpx 28rpx 36rpx;
			background: linear-gradient(90deg, #b59c5b 0%, #d6c494 100%);
			border-radius: 16rpx;
			box-sizing: border-box;
			// #ifdef MP-WEIXIN
			bottom: 42rpx;

			// #endif
			.info {
				flex: 1;

				.content {
					display: flex;
					align-items: center;
					margin-bottom: 25rpx;

					.title {
						margin-right: 10rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #ffffff;
					}

					.number {
						font-size: 22rpx;
						font-weight: 400;
						color: #efe6cd;
					}
				}

				.tips {
					font-size: 24rpx;
					font-weight: 400;
					color: #fcf7e8;
				}
			}

			image {
				width: 222rpx;
				height: 124rpx;
			}
		}

		.popup {
			/deep/.cl-popup {
				border-radius: 32rpx 32rpx 0 0;
			}

			.box {
				padding: 12rpx 0 100rpx 0;
				box-sizing: border-box;

				.title {
					display: block;
					width: 100%;
					margin-bottom: 10rpx;
					text-align: center;
					font-size: 36rpx;
					font-weight: 500;
					color: #282828;
				}

				.tips {
					display: block;
					width: 100%;
					margin-bottom: 50rpx;
					text-align: center;
					font-size: 26rpx;
					font-weight: 400;
					color: #b1b1b1;
				}

				.block {
					margin-bottom: 60rpx;

					&-title {
						display: flex;
						margin-bottom: 24rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #b1b1b1;

						.txt {
							flex: 1;
						}
					}

					.slider {
						margin-top: 40rpx;

						.img {
							width: 57rpx;
							height: 30rpx;
							pointer-events: none;
						}
					}

					.list {
						.item {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 84rpx;
							background-color: #f5f5f5;
							border-radius: 42rpx;
							font-size: 32rpx;
							font-weight: 400;
							color: #282828;

							image {
								width: 32rpx;
								height: 32rpx;
								margin-right: 12rpx;
							}

							&.is-active {
								background: linear-gradient(90deg, #e6b66d 0%, #e89d2d 100%);
								color: #ffffff;
							}
						}
					}
				}

				.btn {
					margin-top: 20rpx;
					padding: 0 32rpx;

					/deep/.cl-button {
						height: 87rpx;
						background-color: #4d8b9d;

						::after {
							border: 0;
						}

						&__text {
							font-size: 32rpx;
							font-weight: 400;
							color: #ffffff;
						}
					}
				}
			}
		}

		.brief {
			/deep/.cl-popup {
				border-radius: 32rpx 32rpx 0 0;
			}

			.box {
				padding-bottom: 80rpx;

				.info {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 100%;
					margin-bottom: 50rpx;

					.dazhaohu {
						position: absolute;
						align-items: center;
						top: 40rpx;
						right: 40rpx;
						display: flex;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.avatar {
						position: relative;
						width: 120rpx;
						height: 120rpx;
						margin-bottom: 18rpx;

						&-img {
							width: 100%;
							height: 100%;
						}

						.icon {
							display: flex;
							justify-content: center;
							align-items: center;
							position: absolute;
							right: 0;
							bottom: 0;
							width: 36rpx;
							height: 36rpx;
							background-color: #58bcff;
							border-radius: 50%;

							&-img {
								width: 25rpx;
								height: 24rpx;
							}
						}

						.woman-icon {
							display: flex;
							justify-content: center;
							align-items: center;
							position: absolute;
							right: 0;
							bottom: 0;
							width: 36rpx;
							height: 36rpx;
							background-color: #ff5a70;
							border-radius: 50%;

							&-img {
								width: 25rpx;
								height: 24rpx;
							}
						}
					}

					.name {
						display: flex;
						margin-bottom: 20rpx;
						font-size: 36rpx;
						font-weight: 500;
						color: #000000;
					}

					&-info {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;

						.id {
							display: block;
							margin-right: 18rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #b1b1b1;
						}

						.position {
							display: flex;
							align-items: center;
							height: 36rpx;
							padding: 0 18rpx;
							background-color: #f5f5f5;
							border-radius: 21rpx;

							.content {
								margin-left: 8rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #282828;
							}
						}
					}

					.signature {
						font-size: 24rpx;
						font-weight: 400;
						color: #b1b1b1;
					}
				}

				.photo {
					&-top {
						display: flex;
						align-items: center;
						margin-bottom: 28rpx;

						.photo-title {
							display: flex;
							flex: 1;
							font-size: 36rpx;
							font-weight: 400;
							color: #282828;
						}

						.photo-more {
							display: flex;
							align-items: center;
							font-size: 28rpx;
							font-weight: 400;
							color: #bbbbbb;
						}
					}

					.list {
						.item {
							image {
								width: 216rpx;
								height: 216rpx;
								border-radius: 18rpx;
							}
						}
					}
				}
			}
		}
	}
</style>